<template>
  <div></div>
</template>

<script setup>
import { inject, onMounted, onUnmounted } from 'vue'
import { getWuhanBuilding, getWuhanRoad } from '@/assets/api/index'
import { CityBuildingLayer, LineLayer, LayerSwitch } from '@antv/l7'
const mapScene = inject('mapScene')
let buildingLayer, lineLayer, layerSwitch
onMounted(async () => {
  mapScene.value.map.flyTo({ center: [114.29949, 30.59309], zoom: 13, pitch: 45 })
  const buildingData = await getWuhanBuilding()
  const roadData = await getWuhanRoad()
  buildingLayer = new CityBuildingLayer({
    name: '建筑',
  })
  buildingLayer.source(buildingData.data).filter('Elevation', (val) => val > 30).size('Elevation', (val) => {
      return val;
    })
    .color('rgba(240,240,240,1.0)')
    .animate({
      enable: true,
    })
    .active(true)
    .style({
      opacity: 0.7,
      baseColor: 'rgb(16, 16, 16)',
      windowColor: 'rgb(30, 60, 89)',
      brightColor: 'rgb(255, 176, 38)',
      sweep: {
        enable: true,
        sweepRadius: 2,
        sweepColor: '#1990FF',
        sweepSpeed: 0.5,
        sweepCenter: [114.29, 30.59],
      },
    })
  mapScene.value.scene.addLayer(buildingLayer)
  lineLayer = new LineLayer({
    name: '路网',
  })
  lineLayer.source(roadData.data).shape('line')
    .color('type',(type)=>{
      switch (type) {
        case 'motorway':
          return '#F9D371'
        case 'motorway_link':
          return '#3DB2FF'
        case 'trunk':
          return 'green'
        case 'trunk_link':
          return '#6E85B2'
        case 'primary':
          return '#F47340'
        case 'primary_link':
          return '#F6A9A9'
        case 'secondary':
          return '#EF2F88'
        case 'secondary_link':
          return '#5F7A61'
        case 'tertiary':
          return '#1ee3cf'
        case 'tertiary_link':
          return '#C2F784'
        case 'pedestrian':
          return '#FFF89A'
        case 'residential':
          return 'rgba(22, 119, 255, .5)'
        case 'road':
          return '#93FFD8'
        case 'path':
          return '#BAFFB4'
        case 'unclassified':
          return '#D3DEDC'
        case 'service':
          return '#AEFEFF'
        case 'living_street':
          return '#9B0000'
        case 'track':
          return '#F5F5F5'
        case 'highway':
          return 'red'
        case 'rail':
          return '#08ffc8'
        default:
          return '#FFE3E3'
      }
    })
    .active(true)
    .size(1)
    .style({
      opacity: 0.8,
    })
    .animate({
      interval:1,
      duration: 1,
      trailLength:2
    })
  mapScene.value.scene.addLayer(lineLayer)
  layerSwitch = new LayerSwitch({
    layers: [buildingLayer, lineLayer],
    className:'my-custom-layer-switch'
  });
   mapScene.value.scene.addControl(layerSwitch);
setTimeout(() => {
    const layerSwitchEl = document.querySelector('.l7-button-control.l7-control.my-custom-layer-switch');
    if (layerSwitchEl) {
      // 直接通过JS设置样式（优先级最高）
      layerSwitchEl.style.position = 'absolute';
      layerSwitchEl.style.top = '100px'; // 自定义位置
      layerSwitchEl.style.right = '10px';
      layerSwitchEl.style.left = 'auto';
      layerSwitchEl.style.bottom = 'auto';
      layerSwitchEl.style.zIndex = '9999';
    }
  }, 1000); // 延迟1秒，确保控件已渲染
})

onUnmounted(() => {
 mapScene.value.scene.removeLayer(buildingLayer);
 mapScene.value.scene.removeLayer(lineLayer);
 mapScene.value.scene.removeControl(layerSwitch);
})
</script>

<style scoped>
</style>
